<!-- 创建圈子页 -->
<!-- 小鸽子 更新于20/8/22 -->
<template>
	<view class="community">
		<view class="comName">
			<form>
				<view class="nameTitle">
					请输入15字以内圈子名称&nbsp;:
				</view>
				<input type="text" maxlength="15" :class="nameIsFocus?'active':''" @tap="changeNameColor()" @blur="changeNameBack()"
				 v-model="information.name" />
			</form>
		</view>
		<view class="comIntro">
			<form>
				<view class="introTitle">
					请输入20字以内圈子介绍&nbsp;:
				</view>
				<input type="text" maxlength="20" :class="introIsFocus?'active':''" @tap="changeIntroColor()" @blur="changeIntroBack()"
				 v-model="information.introduce" />
			</form>
		</view>
		<!-- 上传圈子头像 -->
		<view class="comHeadPhoto">
			<text>上传内圈子头像&nbsp;:</text>
			<view>

				<text class="inxupt inxupttubiao29 headPhoto" @tap="getHeadImage">

					<view class="imageBox" v-show="isHeadShow">
						<image :src="information.headImageUrl" mode="aspectFill" v-if="information.headImageUrl" v-model="information.headImageUrl"></image>
					</view>
				</text>
				<view class="delete" @tap="deleteHead" v-show="deleteHeadShow">
					<text class="inxupt inxupttubiao23"></text>
				</view>
			</view>

		</view>
		<view class="comBackPhoto">
			<text>上传内圈子背景&nbsp;:</text>
			<view>
				<text class="inxupt inxupttubiao29 backPhoto" @tap="getBackImage">
					<view class="imageBox" v-show="isBackShow">
						<image :src="information.backImageUrl" mode="aspectFill" v-if="information.backImageUrl" v-model="information.backImageUrl"></image>
					</view>

				</text>
				<view class="delete" @tap="deleteBack" v-show="deleteBackShow">
					<text class="inxupt inxupttubiao23"></text>
				</view>
			</view>
		</view>
		<button class="btn" type="default" size="mini" @tap="submitInformation" @click="pullId">确认创建</button>
	</view>
</template>

<script>
	import {
		_ajax
	} from '../../in-xupt-functions.js'
	import BaseUrl from '../../config.js'
	export default {
		data() {
			return {
				nameIsFocus: false,
				introIsFocus: false,
				isHeadShow: false,
				deleteHeadShow: false,
				isBackShow: false,
				deleteBackShow: false,
				information: { //表单信息
					name: '',
					introduce: '',
					headImageUrl: '',
					backImageUrl: ''
				}
			}
		},
		methods: {
			changeIntroColor: function() {
				this.introIsFocus = true;
			},
			changeIntroBack: function() {
				this.introIsFocus = false;
			},
			changeNameColor: function() {
				this.nameIsFocus = true;
			},
			changeNameBack: function() {
				this.nameIsFocus = false;
			},
			// 上传头像图片
			deleteHead: function() {
				this.isHeadShow = false;
				this.deleteHeadShow = false;

			},
			getHeadImage: function() {
				const that = this
				that.token = uni.getStorageSync('token')
				uni.chooseImage({
					count: 1, //图片数量
					sizeType: ['original', 'compressed'], //图片是否压缩
					sourceType: ['album'],
					success: function(res) {
						that.information.headImageUrl = res.tempFilePaths[0]
						if (that.information.headImageUrl !== '') {
							that.isHeadShow = true;
							that.deleteHeadShow = true;
						}

						const tempFilePaths = res.tempFilePaths //数组
						uni.uploadFile({
							url: BaseUrl + '/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': that.token,
								'contentType': 'multipart/form-data'
							},

							success: (res) => {
								that.information.headImageUrl = JSON.parse(res.data).data
								if (res.data.msg == '上传成功') {
									uni.showToast({
										title: '图片上传成功'
									})
								}
							}
						})
					}
				})
			},

			deleteBack: function() {
				this.isBackShow = false;
				this.deleteBackShow = false;
			},
			getBackImage: function() {
				const that = this;
				that.token = uni.getStorageSync('token')
				uni.chooseImage({
					count: 1, //图片数量
					sizeType: ['original', 'compressed'], //图片是否压缩
					sourceType: ['album'],
					success: function(res) {
						that.information.backImageUrl = res.tempFilePaths[0] //数组
						if (that.information.backImageUrl !== '') {
							that.isBackShow = true;
							that.deleteBackShow = true;
						}
						const tempFilePaths = res.tempFilePaths //数组
						uni.uploadFile({
							url: BaseUrl + '/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': that.token,
								'contentType': 'multipart/form-data'
							},

							success: (res) => {
								that.information.backImageUrl = JSON.parse(res.data).data
								if (res.data.msg == '上传成功') {
									uni.showToast({
										title: '图片上传成功'
									})
								}
							}
						})
					}
				})
			},
			submitInformation: function() {
				const data = this.information;
				if (data.name == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入圈子名称'
					})
				} else if (data.introduce == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入圈子介绍'
					})
				} else if (this.deleteHeadShow ==false) {
					uni.showToast({
						icon: 'none',
						title: '请上传圈子头像'
					})
				} else if (this.deleteBackShow ==false) {
					uni.showToast({
						icon: 'none',
						title: '请上传圈子背景'
					})
				} else {
					uni.showLoading({
						title: '正在创建',
					})
					this.creatInformation()
				}
			},
			pullId: function(id) {
				const communityId = id
				setTimeout(function() {
					uni.redirectTo({
						url: '../EachCommuity/EachCommuity?communityId=' + communityId + '&create=true'
					})
				}, 2500)
			},
			back: function() {
				uni.switchTab({
					url: "../Community/Community"
				})
			},
			creatInformation: function() {
				_ajax({
					url: '/circle',
					method: 'POST',
					data: {
						'avatarUrl': this.information.headImageUrl,
						'bgImgUrl': this.information.backImageUrl,
						'description': this.information.introduce,
						'name': this.information.name
					}
				}).then(res => {
					this.pullId(res.data.data.circleId)
					if (res.data.msg == '请求成功') {
						uni.showToast({
							icon: 'none',
							title: '圈子创建成功！',
							duration: 1000
						})
					}

				})
			},
			saveText: function() {
				const historyInput = {}
				historyInput.name = this.information.name
				historyInput.introduce = this.information.introduce
				historyInput.headImageUrl = this.information.headImageUrl
				historyInput.backImageUrl = this.information.backImageUrl
				uni.setStorage({
					key: 'historyInput',
					data: historyInput
				})
			},
			clearText: function() {
				uni.removeStorage({
					key: 'historyInput'
				})
			},
			ifGetHistory: function() {
				const that = this
				let flag = false
				uni.getStorage({
					key: 'historyInput',
					success: function(res) {
						let data = res.data
						if (res.data) {
							uni.showModal({
								content: '是否继续上次的编辑',
								success(res) {
									if (res.confirm) {
										that.information.name = data.name
										that.information.introduce = data.introduce
										that.information.headImageUrl = data.headImageUrl
										that.information.backImageUrl = data.backImageUrl
										if (that.information.headImageUrl !== '') {
											that.isHeadShow = true;
											that.deleteHeadShow = true;
										}
										if (that.information.backImageUrl !== '') {
											that.isBackShow = true;
											that.deleteBackShow = true;
										}
									} else if (res.cancel) {
										that.clearText()
										that.information.name = ''
										that.information.introduce = ''
										that.information.headImageUrl = ''
										that.information.backImageUrl = ''
										if (that.information.headImageUrl === '') {
											that.isHeadShow = false;
											that.deleteHeadShow = false;
										}
										if (that.information.backImageUrl === '') {
											that.isBackShow = false;
											that.deleteBackShow = false;
										}
									}
								}
							})
						}
					},
					fail: function() {
						that.clearText()
					}
				})



			}
		},
		onBackPress(e) {
			console.log(e)
			if (e.from == 'backbutton') {
				if (this.information.name === '' && this.information.introduce === '' && this.information.backImageUrl === '' &&
					this.information.headImageUrl === '') {
					this.clearText()
					this.back()
				} else {
					uni.showModal({
						content: '是否保存修改',
						confirmText: '保存',
						success: res => {
							if (res.confirm) {
								const dataButton = this.information;
								this.saveText()
								this.back();
							} else if (res.cancel) {
								this.clearText()
								this.back()

							}
						}

					})
				}
			}
			return true;
		},
		onShow() {
			this.ifGetHistory()
		}
	}
</script>

<style lang="less">
	.community {
		width: 100%;
		height: 100%;

		.comNav {
			width: 100%;
			height: 88rpx;

			.inxupt {
				display: inline-block;
				transform: rotate(180deg);
				font-size: 40rpx;
				margin-top: 18rpx;
				margin-left: 18rpx;
				color: #000;
			}

			.navTitle {
				font-size: 32rpx;
				height: 88rpx;
				width: 200rpx;
				line-height: 88rpx;
				text-align: center;
				white-space: nowrap;
				font-weight: 700;
				position: fixed;
				top: 0;
				left: 270rpx;

			}
		}

		.comName {
			width: 100%;
			height: 170rpx;

			.nameTitle {
				font-weight: 500;
				font-size: 32rpx;
				line-height: 87rpx;
				margin-left: 14rpx;
			}

			input {
				width: 700rpx;
				height: 30rpx;
				padding: 12rpx 0 0 0;
				border-bottom: 2rpx solid #c7c7c7;
				caret-color: #f76b8a;
				font-size: 32rpx;
				margin-left: 14rpx;
			}

			.active {
				border-bottom: 2rpx solid #f76b8a;
			}
		}

		.comIntro {
			width: 100%;
			height: 170rpx;
			margin-top: 30rpx;

			.introTitle {
				font-weight: 500;
				font-size: 32rpx;
				line-height: 87rpx;
				margin-left: 14rpx;
			}

			input {
				width: 700rpx;
				height: 30rpx;
				padding: 12rpx 0 0 0;
				border-bottom: 2rpx solid #c7c7c7;
				caret-color: #f76b8a;
				font-size: 32rpx;
				margin-left: 14rpx;
			}

			.active {
				border-bottom: 2rpx solid #f76b8a;
			}
		}

		.comHeadPhoto {
			width: 350rpx;
			height: 255rpx;
			font-size: 34rpx;
			margin-left: 14rpx;

			.headPhoto {
				width: 200rpx;
				height: 200rpx;
				margin-top: 14rpx;
			}

			.delete {
				width: 32rpx;
				background-color: rgba(255, 255, 255, 0.5);
				height: 32rpx;
				position: relative;
				top: -180rpx;
				left: 144rpx;
				z-index: 9;
				text-align: center;
				line-height: 32rpx;

				.inxupt {
					font-size: 30rpx;
					color: #999999;
				}

			}

			.inxupttubiao29 {
				font-size: 180rpx;

				.imageBox {
					width: 164rpx;
					height: 162rpx;
					position: absolute;
					top: 421rpx;
					left: 12rpx;
					margin-top: 12rpx;
					margin-left: 12rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.comBackPhoto {
			width: 350rpx;
			height: 255rpx;
			font-size: 34rpx;
			margin-left: 14rpx;

			.backPhoto {
				width: 200rpx;
				height: 200rpx;
			}

			.delete {
				width: 32rpx;
				background-color: rgba(255, 255, 255, 0.5);
				height: 32rpx;
				position: relative;
				top: -180rpx;
				left: 144rpx;
				z-index: 9;
				text-align: center;
				line-height: 32rpx;

				.inxupt {
					font-size: 30rpx;
					color: #999999;
				}

			}

			.inxupttubiao29 {
				font-size: 180rpx;

				.imageBox {
					width: 164rpx;
					height: 162rpx;
					position: absolute;
					top: 673rpx;
					left: 12rpx;
					margin-top: 12rpx;
					margin-left: 12rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}
		}

		button {
			position: relative;
			top: 100px;
			left: 20%;
			width: 450rpx;
			height: 88rpx;
			background-color: #F76B8A;
			color: #fff;
			font-size: 32rpx;
			line-height: 90rpx;
			text-align: center;
			font-weight: 500;
			border-radius: 5rpx;
			border: none;
		}
	}
</style>
